<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href='<spring:url value="/webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>'/>
    <link type="text/css" rel="stylesheet"
          href='<spring:url value="/webjars/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>'/>
    <script src='<spring:url value="/webjars/jquery/1.11.1/jquery.min.js"/>'></script>
    <script src='<spring:url value="/webjars/bootstrap/3.3.5/js/bootstrap.js"/>'></script>
    <script src='<spring:url value="/webjars/angularjs/1.5.5/angular.min.js"/>'></script>
    <script src='<spring:url value="/webjars/angularjs/1.5.5/angular-resource.js"/>'></script>
    <script src="<%=request.getContextPath() %>/resources/js/echarts/echarts.js"></script>
    <script src='<spring:url value="/webjars/bootbox/4.4.0/bootbox.js"/>'></script>
    <link href="<%=request.getContextPath() %>/resources/css/content.css" rel="stylesheet">
    <script src="<%=request.getContextPath() %>/resources/js/userMonitor/UserMonitorModel.js"></script>
    <script src="<%=request.getContextPath() %>/resources/js/userMonitor/UserMonitorService.js"></script>
    <script src="<%=request.getContextPath() %>/resources/js/userMonitor/UserMonitorController.js"></script>
</head>
<body ng-app="userMonitorApp" ng-controller="userMonitorCtrl">
<div class="adcc-container">
    <form class="form-inline navBar-float">
        <div class="input-group">
            <ol class="breadcrumb">
                <li class="active">刷新时间(/秒)：</li>
            </ol>
        </div>
        <div class="form-group">
            <select ng-model="sysTime" class="form-control" ng-init="sysTime='5000'"
                    ng-change="changeTime(sysTime)">
                <option value='5000'>5秒</option>
                <option value='10000'>10秒</option>
                <option value='15000'>15秒</option>
            </select>
        </div>
    </form>
    <ol class="breadcrumb">
        <li class="active">系统监控</li>
    </ol>
    <div id="userMonitorGW" class="row">
        <div class="col-md-12 collapse-active" id="collapseThree">
            <div id="userMonitorGWIcon">
                <span ng-if="gwMode=='EMERGENCY'">
                    <img title="应急模式" src="<%=request.getContextPath() %>/resources/pic/emergency.png">
                </span>
                <span ng-if="gwMode=='NORMAL'">
                    <img title="普通模式"  src="<%=request.getContextPath() %>/resources/pic/normal.png">
                </span>
                <span ng-if="gwMode=='EXCEPTION'">
                    <img title="异常" src="<%=request.getContextPath() %>/resources/pic/exception.png">
                </span>
            </div>
            <table>
                <tr>
                    <td width="460px" height="110px"> <%--AMQS--%>
                        <table ng-style="{'background-color':(amqsHealthy==true)? '7ad57a':'d9524e'}"
                               title="{{amqTitle}}" class="sysMonitorTB">
                            <tr>
                                <th class="userMonitorGWFont">AMQS</th>
                            </tr>
                            <tr>
                                <td>Host:{{amqsHost}}&nbsp;&nbsp;&nbsp;&nbsp;Port:{{amqsPort}}</td>
                            </tr>
                            <tr>
                                <td>QM:{{amqsQm}}&nbsp;&nbsp;&nbsp;&nbsp;CHL:{{amqsChannel}}</td>
                            </tr>
                        </table>
                    </td>
                    <td width="460px"> <%--MQ--%>
                        <table ng-style="{'background-color':(mqInfoState=='Running')? '7ad57a':'d9524e'}"
                               title="{{mqInfoTitle}}" class="sysMonitorTB">
                            <tr>
                                <th class="userMonitorGWFont">MQ</th>
                            </tr>
                            <tr>
                                <td>Host:{{mqInfoHost}}&nbsp;&nbsp;&nbsp;&nbsp;Port:{{mqInfoPort}}</td>
                            </tr>
                            <tr>
                                <td>QM:{{mqInfoName}}</td>
                            </tr>
                        </table>
                    </td>
                    <td width="460px">
                        <table ng-style="{'background-color':(gwHealthy==true)? '7ad57a':'d9524e'}" title="{{gwTitle}}"
                               class="sysMonitorTB">
                            <tr>
                                <th class="userMonitorGWFont">{{gwName}}&nbsp;&nbsp;{{gwIp}}</th>
                            </tr>
                            <tr>
                                <td>Host:{{gwHost}}&nbsp;&nbsp;&nbsp;&nbsp;Port:{{gwPort}}</td>
                            </tr>
                            <tr>
                                <td>QM:{{gwQm}}&nbsp;&nbsp;&nbsp;&nbsp;CHL:{{gwChannel}}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <form class="form-inline navBar-float">
                <div class="input-group">
                    <ol class="breadcrumb">
                        <li class="active">刷新时间(/秒)：</li>
                    </ol>
                </div>
                <div class="form-group">
                    <select ng-model="selectTime" class="form-control" ng-init="selectTime='5000'"
                            ng-change="changeTime(selectTime)">
                        <option value='5000'>5秒</option>
                        <option value='10000'>10秒</option>
                        <option value='15000'>15秒</option>
                    </select>
                </div>

            </form>
            <ol class="breadcrumb">
                    <li class="active">用户监控</li>
            </ol>
        </div>
    </div>
    <div id="userMonitor">
        <div id="userMonitorContent" ng-repeat="x in userMonitors">
            <%--绿色--%>
            <span class="userMonitorImg" class="userMonitorImg"
                  ng-if="x.state==3"><img height="25px" data-toggle="tooltip" data-placement="top"
                                          title="NAME:{{ x.name }}&#10;IP:{{ x.ip }}&#10;上行报文数:{{x.upMsgCount}}&#10;下行报文数:{{x.downMsgCount}}&#10;发送队列:{{x.sendQueueName}}&nbsp;&nbsp;深度:{{x.sendQueueDepth}}&#10;接收队列:{{x.recQueueName}}&nbsp;&nbsp;深度:{{x.recQueueDepth}}&#10;STATE:{{x.message}}"
                                          src="<%=request.getContextPath() %>/resources/pic/running.png"></span>
            <%--红色--%>
            <span class="userMonitorImg"
                  ng-if="x.state==1"><img height="25px" data-toggle="tooltip" data-placement="top"
                                          title="NAME:{{ x.name }}&#10;IP:{{ x.ip }}&#10;上行报文数:{{x.upMsgCount}}&#10;下行报文数:{{x.downMsgCount}}&#10;发送队列:{{x.sendQueueName}}&nbsp;&nbsp;深度:{{x.sendQueueDepth}}&#10;接收队列:{{x.recQueueName}}&nbsp;&nbsp;深度:{{x.recQueueDepth}}&#10;STATE:{{x.message}}"
                                          src="<%=request.getContextPath() %>/resources/pic/stop.png"></span>
            <%--灰色--%>
            <span class="userMonitorImg"
                  ng-if="x.state==4"><img height="25px" data-toggle="tooltip" data-placement="top"
                                          title="NAME:{{ x.name }}&#10;IP:{{ x.ip }}&#10;上行报文数:{{x.upMsgCount}}&#10;下行报文数:{{x.downMsgCount}}&#10;发送队列:{{x.sendQueueName}}&nbsp;&nbsp;深度:{{x.sendQueueDepth}}&#10;接收队列:{{x.recQueueName}}&nbsp;&nbsp;深度:{{x.recQueueDepth}}&#10;STATE:{{x.message}}"
                                          src="<%=request.getContextPath() %>/resources/pic/disconnect.png"></span>
            <%--黄色--%>
            <span class="userMonitorImg"
                  ng-if="x.state==2"><img height="25px" data-toggle="tooltip" data-placement="top"
                                          title="NAME:{{ x.name }}&#10;IP:{{ x.ip }}&#10;上行报文数:{{x.upMsgCount}}&#10;下行报文数:{{x.downMsgCount}}&#10;发送队列:{{x.sendQueueName}}&nbsp;&nbsp;深度:{{x.sendQueueDepth}}&#10;接收队列:{{x.recQueueName}}&nbsp;&nbsp;深度:{{x.recQueueDepth}}&#10;STATE:{{x.message}}"
                                          src="<%=request.getContextPath() %>/resources/pic/warning.png"></span>

            <div id="userMonitorFont" data-toggle="tooltip" data-placement="top" title="{{ x.name }}"><a
                    ng-click="showDialogStatusIp(x.ip)">{{x.name}}</a></div>

        </div>
    </div>
    <form class="form-inline navBar-float">
        <div class="input-group">
            <ol class="breadcrumb">
                <li class="active">刷新时间：</li>
            </ol>
        </div>
        <div class="form-group">
            <select ng-model="logTime" class="form-control" ng-init="logTime='30000'"
                    ng-change="changeLogTime(logTime)">
                <option value='15000'>15秒</option>
                <option value='30000'>30秒</option>
                <option value='60000'>60秒</option>
            </select>
        </div>
        &nbsp;&nbsp;
        <div class="input-group">
            <ol class="breadcrumb">
                <li class="active">显示条数(/条)：</li>
            </ol>
        </div>
        <div class="form-group">
            <select ng-model="logCount" class="form-control" ng-init="logCount='50'"
                    ng-change="changeLogCount(logCount)">
                <option value='30'>30</option>
                <option value='50'>50</option>
                <option value='100'>100</option>
            </select>
        </div>
        &nbsp;&nbsp;
    </form>
        <ol class="breadcrumb">
            <li class="active">
                日志
                <a data-toggle="collapse" data-parent="#accordion"
                   href="#collapseOne" class="accordion-toggle glyphicon glyphicon-chevron-down"
                   ng-click="changeUserMonitorHeight()" >
                </a>
            </li>
        </ol>
    <div class="panel-group" id="accordion">
            <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <div>
                        <div id="userMonitorLog">
                            <table class="table table-bordered table-condensed table-hover">
                                <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>用户</th>
                                    <th>日志</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="x in logs" ng-style="setBgColor(x.level)">
                                    <td>{{x.createTime }}</td>
                                    <td>{{x.name}}</td>
                                    <td class="bubble-title" data-toggle="tooltip" data-placement="top" title="{{x.log }}">{{x.log }}
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
    </div>

    <%--提示框模态框--%>
    <div class="modal fade" id="dialogStatusIp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         style="margin-top: 100px;pxoverflow-y: auto" data-backdrop="static">
        <div class="modal-dialog" role="document" style="width:55%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>用户网络检测
                    </h4>
                </div>
                <div class="modal-body">
                    <form id="netForm" name="netForm">
                        <div class="row">
                            <div class="col-md-12">
                                <label for="userMonitorIp" class="col-md-1 control-label">IP:</label>

                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="userMonitorIp" id="userMonitorIp"
                                           ng-pattern="/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/"
                                           ng-model="userMonitorIp">

                                    <div class="error"
                                         ng-show="netForm.userMonitorIp.$dirty && netForm.userMonitorIp.$invalid">
                                        <small class="error" ng-show="netForm.userMonitorIp.$error.pattern">
                                            <span class="font-style">请输入格式正确的IP</span>
                                        </small>
                                    </div>
                                </div>
                                <label for="pingNum" class="col-md-1 control-label">count:</label>

                                <div class="col-md-2">
                                    <input type="text" class="form-control" name="pingNum" id="pingNum"
                                           ng-model="pingNum" ng-init="pingNum=3" ng-pattern="/^[1-9]\d*$/"
                                           placeholder="请输入数字">

                                </div>
                                <div class="col-md-3">
                                    <label class="radio-inline">
                                        <input type="radio" name="radio" value="ping" checked="checked" ng-model="cmd"
                                               ng-checked="true">ping
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="radio" value="tracert" ng-model="cmd">tracert
                                    </label>
                                </div>
                                <div class="col-md-2">
                                    <button type="button" ng-disabled="netForm.$invalid" class="btn btn-success"
                                            ng-click="checkNet(cmd,userMonitorIp,pingNum)">&nbsp;&nbsp;检测
                                        &nbsp;&nbsp;</button>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 20px">
                            <div class="col-md-12">
                            <textarea id="stateList" style="resize: none" class="form-control"
                                      rows="10" disabled></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="form-inline">
                        <div class="col-md-2 col-md-offset-10">
                            <button type="button" data-dismiss="modal" class="btn btn-danger">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
